<template>
  <view class="custom-tab-bar width-full bg-white">
    <view class="content flex-row justify-center align-end padding-bottom-20">
      <template v-for="(item, index) in tabBar" :key="index">
        <view v-if="!item.type" class="flex-column flex-center tab-item padding-lr-10" @click="handleJump(item, index)">
          <image :src="`/static/menu/${ item.icon }${ page === index ? '-check' : '' }.png`" class="tab-icon block" />
          <text class="text-22 tab-text margin-top-10" :class="{ checked: page === index }">{{ item.text }}</text>
        </view>
        <view v-else class="center-item bg-white padding-10 relative" @click="handleJump(item, index)">
          <image :src="`/static/menu/${ item.icon }.png`" class="center-icon block" />
          <text class="text-22 color-white tab-text">{{ item.text }}</text>
        </view>
      </template>
    </view>

    <by-safe-area-bottom />
  </view>
</template>

<script setup lang="ts">
import { jump } from '@/common/util'

interface IProps{
  page: number
}

const props = withDefaults(defineProps<IProps>(), {
  page: 0
})

interface ITabBarItem {
  url: string
  icon: string
  text: string
  type?: string
}

const tabBar:ITabBarItem[] = [
  {
    url: '/pages/index/index',
    icon: 'home',
    text: '首页'
  },
  {
    url: '/pages/rewards/rewards',
    icon: 'rewards',
    text: '奖励'
  },
  {
    url: '/pages/search-questions/search-questions',
    icon: 'search-questions',
    text: '搜题',
    type: 'center'
  },
  {
    url: '/pages/question-bank/question-bank',
    icon: 'question-bank',
    text: '题库'
  },
  {
    url: '/pages/mine/mine',
    icon: 'mine',
    text: '我的'
  }
]

function handleJump(item:ITabBarItem, index: number) {
  if (index === props.page) return
  jump(item.url, 'switchTab')
}
</script>

<style scoped lang="scss">
.custom-tab-bar{
  @include position(fixed, $left: 0, $bottom: 0, $z-index: 500);

  .content{
    height: 128rpx;

    .center-item{
      transform: translateY(20rpx);
      border-radius: 50%;
      margin: 0 42rpx;

      .center-icon{
        width: 136rpx;
        height: 136rpx;
      }

      .tab-text{
        @include position(absolute, $left: 50%, $bottom: 30rpx, $z-index: 2);
        transform: translateX(-50%);
      }

    }

    .tab-item{

      &:nth-child(2){
        margin-left: 84rpx;
      }

      &:nth-child(4){
        margin-right: 84rpx;
      }

      .tab-icon{
        width: 48rpx;
        height: 48rpx;
      }

      .tab-text{
        color: $color-grey;

        &.checked{
          color: $color-primary;
        }

      }

    }

  }

}
</style>
